<script setup>
import { useUserInfoStore, useI18nStore } from '@/stores';
const userInfoStore = useUserInfoStore();
const i18nStore = useI18nStore();
const { okCloudDiskToken } = storeToRefs(userInfoStore); // 用户信息
import logo from '@/assets/icons/logo.svg';
const router = useRouter();
const active = ref(0);
const routerChange = () => {
  okCloudDiskToken.value ? router.push('/mySmallfiles') : router.push('/login');
};
watch(
  () => router.currentRoute.value,
  (newValue) => {
    if (newValue.path == '/plan') {
      active.value = 1;
    } else if (newValue.path == '/contactUs') {
      active.value = 2;
    } else if (newValue.path == '/index') {
      active.value = 0;
    } else if (newValue.path == '/aboutUs') {
      active.value = 3;
    } else {
      active.value = 99;
    }
  },
  { immediate: true }
);
const visible = ref(false);
onMounted(() => {
  updatelist();
});
watch(
  () => i18nStore.translate,
  () => {
    updatelist();
  }
);
const language = computed(() => {
  switch (i18nStore.translate.language) {
    case 'zh':
      return 'EN';
    case 'zh-tw':
      return '繁體中文';
    case 'en':
      return 'English';
    case 'espana':
      return 'Español';
    default:
      return '简体中文';
  }
});
const updatelist = () => {
  list.value = [
    {
      title: i18nStore.translate('index6'),
      content: [
        {
          text: i18nStore.translate('index3'),
          to: 'myFiles'
        },
        {
          text: i18nStore.translate('index4'),
          to: 'userInfo'
        },
        {
          text: i18nStore.translate('index5'),
          to: 'mySharedItems'
        }
      ]
    },
    {
      title: i18nStore.translate('index7'),
      content: [
        {
          text: i18nStore.translate('index8'),
          to: 'plan'
        }
      ]
    },
    // {
    //   title: "平台",
    //   content: [
    //     {
    //       text: "文案文案",
    //     },
    //     {
    //       text: "文案文案",
    //     },
    //     {
    //       text: "文案文案",
    //     },
    //   ],
    // },
    {
      title: i18nStore.translate('index9'),
      content: [
        {
          text: i18nStore.translate('index10'),
          to: 'aboutUs'
        },
        {
          text: i18nStore.translate('index11'),
          to: 'userAgreement'
        },
        {
          text: i18nStore.translate('index12'),
          to: 'privacyAgreement'
        }
      ]
    },

    {
      title: i18nStore.translate('index13'),
      content: [
        {
          text: i18nStore.translate('index14'),
          to: 'help'
        },
        {
          text: i18nStore.translate('index15'),
          to: 'contactUs'
        }
      ]
    }
    // {
    //   title: "法律",
    //   content: [
    //     {
    //       text: "服务条款",
    //     },
    //     {
    //       text: "隐私政策",
    //     },
    //     {
    //       text: "版权争议",
    //     },
    //   ],
    // },
  ];
};
const list = ref([]);
const visibles = ref(false);
</script>

<template>
  <div
    class="head flex justify-between mobile:border-b-[1px] mobile:items-center"
  >
    <div class="h-[60px] cursor-pointer flex">
      <a href="https://okpan.com/mySmallfiles">
        <img :src="logo" alt="" class="w-[60px] h-[60px]" />
      </a>

      <ul
        class="flex justify-evenly font-bold leading-[70px] cursor-pointer mobile:hidden ml-10 text-xl"
      >
        <a href="https://okpan.com/index">
          <li
            class="hover:text-[#00E1FF] border-b-[4px] border-[#00E1FF] border-opacity-0"
            :class="active == 0 ? 'text-[#00E1FF] border-opacity-100' : ''"
          >
            {{ i18nStore.translate('index') }}
          </li>
        </a>
        <a href="https://okpan.com/plan">
          <li
            class="hover:text-[#00E1FF] ml-[70px] border-b-[4px] border-[#00E1FF] border-opacity-0"
            :class="active == 1 ? 'text-[#00E1FF]  border-opacity-100' : ''"
          >
            {{ i18nStore.translate('pricing_plan') }}
          </li>
        </a>
        <a href="https://okpan.com/contactUs">
          <li
            class="ml-[70px] hover:text-[#00E1FF] border-b-[4px] border-[#00E1FF] border-opacity-0"
            :class="active == 2 ? 'text-[#00E1FF]  border-opacity-100' : ''"
          >
            {{ i18nStore.translate('call_me') }}
          </li>
        </a>
        <a href="https://okpan.com/aboutUs">
          <li
            class="ml-[70px] hover:text-[#00E1FF] border-b-[4px] border-[#00E1FF] border-opacity-0"
            :class="active == 3 ? 'text-[#00E1FF]  border-opacity-100' : ''"
          >
            {{ i18nStore.translate('index10') }}
          </li>
        </a>
      </ul>
    </div>
    <div class="flex mobile:hidden cursor-pointer">
      <div class="flex items-center mr-2" @click="visibles = true">
        <img src="@/assets/icons/diqiu.svg" alt="" width="20px" class="mr-2" />
        <div :title="i18nStore.translate('language')">
          <div class="inline-block cursor-pointer font-bold">
            {{ language }}
          </div>
        </div>
      </div>
      <span
        class="my-5 px-5 py-1 text-center leading-[30px] border text-xl font-bold border-[#00e1ff] rounded-lg text-[#00e1ff]"
        @click="routerChange"
      >
        {{
          okCloudDiskToken
            ? i18nStore.translate('my_okpan')
            : i18nStore.translate('login')
        }}</span
      >
      <span
        v-if="!okCloudDiskToken"
        class="my-5 px-5 py-2 text-center text-xl font-bold leading-[30px] rounded-lg text-[#ebfbff] bg-[#00e1ff] ml-3"
        @click="router.push('/register')"
        >{{ i18nStore.translate('register') }}</span
      >
    </div>
    <div
      class="cursor-pointer pc:hidden flex justify-between items-center"
      @click="visible = !visible"
    >
      <i
        class="pi pi-align-justify"
        style="font-size: 2rem; padding-top: 10px"
      ></i>
    </div>
  </div>
  <div class="flex justify-content-center pc:hidden">
    <Sidebar v-model:visible="visible" position="bottom" style="height: auto">
      <Accordion expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
        <AccordionTab v-for="(i, index) in list" :key="index">
          <template #header>
            <span class="flex align-items-center gap-2 w-full">
              <span class="font-bold white-space-nowrap">{{ i.title }}</span>
            </span>
          </template>
          <p
            class="text-[#888888]"
            v-for="(t, index) in i.content"
            :key="index"
          >
            <a href="https://okpan.com/">{{ t.text }}</a>
          </p>
        </AccordionTab>
      </Accordion>

      <div v-if="okCloudDiskToken">
        <a href="https://okpan.com/mySmallfiles">
          <p class="text-[#888888] pad">
            {{ i18nStore.translate('my_okpan') }}
          </p>
        </a>
      </div>
      <div v-else>
        <a href="https://okpan.com/login">
          <p class="text-[#888888] pad">{{ i18nStore.translate('login') }}</p>
        </a>
        <a href="https://okpan.com/register">
          <p class="text-[#888888] pad">
            {{ i18nStore.translate('register') }}
          </p>
        </a>
      </div>
      <p
        class="text-[#888888] pad"
        v-if="i18nStore.translate.language === 'zh'"
        @click="i18nStore.chooseLanguage('zh-tw')"
      >
        EN
      </p>
      <p
        class="text-[#888888] pad"
        v-if="i18nStore.translate.language === 'zh-tw'"
        @click="i18nStore.chooseLanguage('en')"
      >
        繁体
      </p>
      <p
        class="text-[#888888] pad"
        v-if="i18nStore.translate.language === 'en'"
        @click="i18nStore.chooseLanguage('espana')"
      >
        EN
      </p>
      <p
        class="text-[#888888] pad"
        v-if="i18nStore.translate.language === 'espana'"
        @click="i18nStore.chooseLanguage('zh')"
      >
        EP
      </p>
    </Sidebar>
  </div>
  <Dialog
    v-model:visible="visibles"
    modal
    :header="i18nStore.translate('select_language')"
    :style="{ width: '25rem' }"
    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
    class="font-bold"
  >
    <div
      class="flex w-full justify-between hover:bg-[#DCF5FB] cursor-pointer items-center my-2"
      @click="
        i18nStore.chooseLanguage('zh');
        visibles = false;
      "
    >
      <p class="m-0 h-10 text-xl">简体中文</p>
      <img
        v-if="i18nStore.translate.language === 'zh'"
        src="@/assets/icons/duihaosvg.svg"
        alt=""
        width="20px"
      />
    </div>
    <div
      class="flex w-full justify-between hover:bg-[#DCF5FB] cursor-pointer items-center my-2"
      @click="
        i18nStore.chooseLanguage('zh-tw');
        visibles = false;
      "
    >
      <p class="m-0 h-10 text-xl">繁體中文</p>
      <img
        v-if="i18nStore.translate.language === 'zh-tw'"
        src="@/assets/icons/duihaosvg.svg"
        alt=""
        width="20px"
      />
    </div>
    <div
      class="flex w-full justify-between hover:bg-[#DCF5FB] cursor-pointer items-center my-2"
      @click="
        i18nStore.chooseLanguage('en');
        visibles = false;
      "
    >
      <p class="m-0 h-10 text-xl">English</p>
      <img
        v-if="i18nStore.translate.language === 'en'"
        src="@/assets/icons/duihaosvg.svg"
        alt=""
        width="20px"
      />
    </div>
    <div
      class="flex w-full justify-between hover:bg-[#DCF5FB] cursor-pointer items-center my-2"
      @click="
        i18nStore.chooseLanguage('espana');
        visibles = false;
      "
    >
      <p class="m-0 h-10 text-xl">Español</p>
      <img
        v-if="i18nStore.translate.language === 'espana'"
        src="@/assets/icons/duihaosvg.svg"
        alt=""
        width="20px"
      />
    </div>
  </Dialog>
</template>

<style scoped lang="scss">
.logo {
  // background-color: aquamarine;
  line-height: 70px;
}
.pad {
  padding: 1.25rem;
  color: #334155;
  font-weight: bold;
}
</style>
